<template>
    <div class="headBack">
       <div class="logo flexCon"><span><img src="@/assets/images/20190902102521.png"></span></div>
       <el-menu
            router
            :default-active="$route.path"
            class="el-menu-vertical-demo">
            <el-submenu v-for="(item,index) in subMenu" :key="index" :index="index+''">
                <template slot="title">
                    <i v-if="item.label == '人员管理'">
                        <img src="@/assets/images/back/icon1_1.png" alt="">
                        <img src="@/assets/images/back/icon1.png" alt="">
                    </i>
                    <i v-if="item.label == '产品管理'">
                        <img src="@/assets/images/back/icon2.png" alt="">
                        <img src="@/assets/images/back/icon2_1.png" alt="">
                    </i>
                    <i v-if="item.label == '灯具检测'">
                        <img src="@/assets/images/back/icon3.png" alt="">
                        <img src="@/assets/images/back/icon3_1.png" alt="">
                    </i>
                    <i v-if="item.label == '实测检测'">
                        <img src="@/assets/images/back/icon4.png" alt="">
                        <img src="@/assets/images/back/icon4_1.png" alt="">
                    </i>
                     <i v-if="item.label == '统计分析'">
                        <img src="@/assets/images/back/icon4.png" alt="">
                        <img src="@/assets/images/back/icon4_1.png" alt="">
                    </i>
                     <i v-if="item.label == '系统配置'">
                        <img src="@/assets/images/back/icon5.png" alt="">
                        <img src="@/assets/images/back/icon5_1.png" alt="">
                    </i>
                    <span>{{item.label}}</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item v-for="child in item.children" :key="child.id" :index="child.url">{{child.label}}</el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            <!-- <el-submenu index="1">
                <template slot="title">
                    <i>
                        <img src="@/assets/images/back/icon1_1.png" alt="">
                        <img src="@/assets/images/back/icon1.png" alt="">
                    </i>
                    <span>人员管理</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="/role">角色管理</el-menu-item>
                    <el-menu-item index="/user">用户管理</el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            <el-submenu index="2" style="display:none">
                <template slot="title">
                    <i>
                        <img src="@/assets/images/back/icon2.png" alt="">
                        <img src="@/assets/images/back/icon2_1.png" alt="">
                    </i>
                    <span>产品管理</span>
                </template>
                <el-menu-item-group> 
                    <el-menu-item index="/brand">品牌管理</el-menu-item>
                    <el-menu-item index="/series">系列管理</el-menu-item>
                    <el-menu-item index="/product">产品管理</el-menu-item>
                    <el-menu-item index="/release">产品发布 </el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            <el-submenu index="3">
                <template slot="title">
                    <i>
                        <img src="@/assets/images/back/icon3.png" alt="">
                        <img src="@/assets/images/back/icon3_1.png" alt="">
                    </i>
                    <span>灯具检测</span>
                </template>
                <el-menu-item-group> 
                    <el-menu-item index="/information" style="display:none">>灯参信息</el-menu-item>
                    <el-menu-item index="/lampData">实测数据</el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            <el-submenu index="4">
                <template slot="title">
                    <i>
                        <img src="@/assets/images/back/icon4.png" alt="">
                        <img src="@/assets/images/back/icon4_1.png" alt="">
                    </i>
                    <span>统计分析</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="/application">应用分析</el-menu-item>
                    <el-menu-item index="/productAnalyze">产品分析</el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            <el-submenu index="5">
                <template slot="title">
                    <i>
                        <img src="@/assets/images/back/icon5.png" alt="">
                        <img src="@/assets/images/back/icon5_1.png" alt="">
                    </i>
                    <span>系统配置</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="/projectType">项目类型</el-menu-item>
                    <el-menu-item index="/single">单体属性</el-menu-item>
                </el-menu-item-group>
            </el-submenu> -->
        </el-menu>
        <div class="headBack_top">
            <div class="title">{{menuName}}</div>
             <ul class="navRig">
                <li @click="backWeb()" style="cursor:pointer"><img src='@/assets/images/back/wnagzhan.png' /><span>网站</span></li>
                <li>
				<img v-if="userIcon != ''  && userIcon != 'undefined'" :src="ImgPath + userIcon" alt="" width="50">
				<img v-else src="@/assets/images/back/ren.png" alt="">
                    
                    <span>{{userName}}</span></li>
                <li @click="logout()"  style="cursor:pointer"><img src="@/assets/images/back/guan.png" alt=""><span>退出</span></li>
            </ul>
        </div>
    </div>
</template>
<script>
import backHeader from "@/views/common/backHeader.vue";
import { totalmem } from 'os';
export default {
  data() {
    return {
      totalMenu:[],
      subMenu:[],
      userName:'',
      menuName:'',
      userIcon:''
    }
  },
  methods: {
      initData(){
          this.menuName = this.$route.meta.title
          let self = this
          this.$http.get('/api/menus/json',{},function(res){
              if(res.success){
                self.totalMenu = res.data
                var root = 0
                for(var i = 0;i<self.totalMenu.length;i++){
                    if(self.totalMenu[i].permPid==''){
                        root = self.totalMenu[i].id
                    }
                }
                self.subMenu = self.filterArray(self.totalMenu,root)
                console.log(self.subMenu)
              }
          })
          this.userName = localStorage.getItem('userName')
          this.userIcon = localStorage.getItem("userIcon")
      },
        filterArray(data,parent) {
                let vm = this;
                var tree = [];
                var temp;
                for (var i = 0; i < data.length; i++) {
                  data[i].label = data[i].permName
                  if(data[i].permName == '机构信息'){
                      data[i].url="/institutionalInformation"
                  }
                  else if(data[i].permName == '角色管理'){
                    data[i].url = '/role'
                  }else if(data[i].permName == '用户管理'){
                    data[i].url = '/user'
                  }else if(data[i].permName == '品牌管理'){
                      data[i].url = '/brand'
                  }else if(data[i].permName == '系列管理'){
                      data[i].url = '/series'
                  }else if(data[i].permName == '产品管理'){
                      data[i].url = '/product'
                  }else if(data[i].permName == '产品发布'){
                      data[i].url = '/release'
                  }else if(data[i].permName == '灯参推送'){
                      data[i].url = '/information'
                  }else if(data[i].permName == '实测数据'){
                      data[i].url = '/lampData'
                  }else if(data[i].permName == '应用分析'){
                      data[i].url = '/application'
                  }else if(data[i].permName == '产品分析'){
                      data[i].url = '/productAnalyze'
                  }else if(data[i].permName == '项目类型'){
                      data[i].url = '/projectType'
                  }else if(data[i].permName == '单体属性'){
                      data[i].url = '/single'
                  }else if(data[i].permName == '数据发布'){
                      data[i].url = '/datapush'
                  }else if(data[i].permName == '符合数据'){
                      data[i].url = '/CoincidenceData'
                  }else if(data[i].permName == '用量分析'){
                      data[i].url = '/dosageAnalysis'
                  }
                    if (data[i].permPid == parent) {
                        var obj = data[i];
                        temp = this.filterArray(data, data[i].id);
                        if (temp.length > 0) {
                            obj.children = temp;
                        }
                        tree.push(obj);
                    }
                }
                return tree;
        },
        backWeb(){
            this.$router.push("/")
        }
        ,
		logout(){
            localStorage.setItem("token",'')
			localStorage.setItem("expiryTime",new Date().getTime())
			localStorage.setItem('userName','')
			localStorage.setItem('userRole','')
			this.isLogin  = false
        	this.$router.push({path:'/'})
		}
  },
  created(){
      this.initData()
  }
};
</script>
<style lang="scss" rel="stylesheet/scss" >
    .headBack{
        .logo{
            background-color: #5a649f;
            -webkit-box-shadow: 0px 0px 40px 0px rgba(23, 23, 23, 0.08);
            box-shadow: 0px 0px 40px 0px rgba(23, 23, 23, 0.08);
            height: 82px;
            padding: 10px 20px;
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-align: center;
                -ms-flex-pack: center;
                justify-content: center;
                -webkit-box-pack: center;
                -ms-flex-flow: column wrap;
                -webkit-box-orient: vertical;
                -webkit-box-direction: normal;
                flex-flow: column wrap;
                -ms-flex-align: center;
                align-items: center;
            span{
                display: block;
                width: 100%;
                max-width: 100%;
                img{
                    max-width: 100%;
                    max-height: 100%;
                    margin: 0 auto;
                }
            }
        }
        .el-menu{
            background-color: #5a649f;
            border-right: 1px solid #5a649f;
            .el-menu-item-group__title{
                display: none;
            }
            .el-submenu{
                .el-menu-item{
                    color: #fff;
                    position: relative;
                    padding-left: 60px !important;
                }
                .el-submenu__title{
                    span{
                        font-size: 16px;
                        color: #b6bcdc;
                    }
                    i{
                        width: 1.2em;
                        height: 1.2em;
                        vertical-align: -0.15em;
                        fill: currentColor;
                        margin-right: 16px;
                    }
                    img{
                        display: inline-block;
                        position: relative;
                        top: -2px;
                        &:last-child{
                            display: none; 
                        }
                    }
                }
                &.is-opened{
                    background-color: #454d81;
                    border-left: 1px solid #f0b924;
                    .el-submenu__title{
                        color: #fff;
                        &:hover{
                            background: none;
                        }
                        i img:first-child{
                            display: none;
                        }
                        i img:last-child{
                            display: inline-block;
                        }
                        span{
                            color: #fff;
                        }
                    }
                    .el-menu-item{
                            position: relative;
                            &::before{
                                content: '';
                                width: 6px;
                                height: 6px;
                                border-radius:50%;
                                background: #fff; 
                                position: absolute;
                                left: 40px;
                                top: 22px;
                            }
                            &:hover{
                                background: none;
                                color: #f0b924;
                                &::before{
                                    background: #f0b924;
                                }
                            }
                        }
                    .el-menu-item-group{
                        background-color: #454d81 !important;
                        .el-menu-item.is-active{
                            color: #f0b924;
                            &::before{
                                background: #f0b924;
                            }
                        }
                
                    }
                }
            }
        }
        .headBack_top{
             .title{
                color: #333333;
                font-size: 18px;
                padding-left: 50px;
                font-weight: bold;
            }
            height: 82px;
            line-height: 82px;
            border-radius: 0px !important;
            color: #333;
            background-color: #ffffff;
            -webkit-box-shadow: 0px 0px 40px 0px rgba(23, 23, 23, 0.08);
            box-shadow: 0px 0px 40px 0px rgba(23, 23, 23, 0.08);
            border: none;
            position: fixed;
            z-index: 2;
            width: calc(100% - 240px);
            width: -webkit-calc(100% - 240px);
            top: 0;
            right: 0;
            ul.navRig{
                position: absolute;
                right: 50px;
                top: 0;
                li{
                    display: inline-block;
                    font-size: 16px;
                    color: #333;
                    vertical-align: middle;
                    line-height: 20px;
                    padding: 0 20px 0 18px;
                    font-weight: bold;
                    border-right: 1px solid rgba(165, 176, 181, 0.3);
                    margin-left: 20px;
                    position: relative;
                    span{
                        margin-left: 10px;
                    }
                    &:last-child {
                        padding-right: 0;
                        border: none;
                    }
                    img{
                        display: inline-block;
                        height: 22px;
                        margin-right: 5px;
                        position: absolute;
                        left: 0;
                        width: auto;
                    }
                }
            }
        }
    }
    
</style>
